<template>
  <PageWrapper>
    <BasicTable @register="registerTable">
      <template #form-channelCode="{ model, field }">
        <a-tree-select
          v-model:value="model[field]"
          :tree-data="channelTreeData"
          multiple
          allowClear
          :field-names="{
            label: 'channelName',
            value: 'channelCode',
            children: 'children'
          }"
          treeNodeFilterProp="channelName"
          placeholder="请选择渠道名称"
          :maxTagCount="1"
          showCheckedStrategy="SHOW_ALL"
        ></a-tree-select>
      </template>
      <template #tableTitle> </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'buyType'">
          <span v-if="record.buyType == 'corp'">企业</span>
          <span v-else-if="record.buyType == 'human'">个人</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'payAmt'">
          <span v-if="record.payAmt < 0" style="color: #d9001d">{{ record.payAmt }}</span>
          <span v-else-if="record.orderType == '1'" style="color: #d9001d">{{ record.payAmt }}</span>
          <span v-else>{{ record.payAmt }}</span>
        </template>
        <template v-else-if="column.dataIndex === 'payType'">
          <span v-if="record.payType == 'alipay'">支付宝支付</span>
          <span v-else-if="record.payType == 'wechat'">微信支付</span>
          <span v-else-if="record.payType == 'wechat-pro'">小程序支付</span>
          <span v-else-if="record.payType == 'offline'">线下支付</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'orderType'">
          <span v-if="record.orderType == '0'">正式</span>
          <span style="color: #d9001d" v-else-if="record.orderType == '1'">退单</span>
          <span v-else>--</span>
        </template>
        <template v-else-if="column.dataIndex === 'orderStatus'">
          <span class="global-wait-status" v-if="record.orderStatus == 1">待付款</span>
          <span class="global-active-status" v-else-if="record.orderStatus == 2">已完成</span>
          <span class="global-stop-status" v-else-if="record.orderStatus == 3">已关闭</span>
          <span class="global-error-status" v-else-if="record.orderStatus == 4">已失效</span>
        </template>
        <template v-else-if="column.dataIndex === 'operate'">
          <a-button
            type="link"
            class="g-operate-btn"
            v-auth="permissionCodeMap.bpaiOrderEdit"
            @click="operateUser(record)"
            >编辑</a-button
          >
        </template>
      </template>
    </BasicTable>
    <OrderView @register="orderViewRegister" @operateSuccess="operateSuccess" />
  </PageWrapper>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, watch, onMounted, createVNode } from 'vue'
import PageWrapper from '@/components/PageWrapper/index.vue'
import { BasicTable, useTable } from '@/components/Table'
import { getBasicColumns, getSearchFormConfig } from './dataSource'
import { useDrawer } from '@/components/Drawer'
import { useModal } from '@/components/Modal'
import OrderView from './components/OrderView.vue'
import { userStore } from '@/store/modules/user'
import { permissionCodeMap } from '@/utils/permissionCodeMap'
import { createChannelTree, transformToTree } from '@/utils'
import { operateActionType, operateTxtType, constantMap } from '@/types/enum'
import { UserRecord } from '@/types/system'
import { message, Modal } from 'ant-design-vue'
import { ExclamationCircleFilled } from '@ant-design/icons-vue'
import api from '@/api'
const { queryOrderList, queryChannelList } = api

const userModule = userStore()

const operateActionTypeMap = operateActionType

const [registerTable, { reload, setPagination, getForm }] = useTable({
  api: queryOrderList,
  columns: getBasicColumns(),
  useSearchForm: true,
  formConfig: getSearchFormConfig(),
  showIndexColumn: true,
  indexColumnProps: {
    fixed: 'left'
  },
  scroll: { y: constantMap.tableYHeight, x: constantMap.tableXWidth }
})

const [orderViewRegister, { openDrawer: OrderViewOpenDrawer, setDrawerProps }] = useDrawer()

const checkedDelKeys = ref<Array<string | number>>([])
const checkedDelList = ref<Array<UserRecord>>([])
const channelTreeData = ref<any>([])
const seclectedChannel = ref<any>([])

onMounted(async () => {
  const res = await queryChannelList({ channelRange: '2' })
  channelTreeData.value = transformToTree(res.result)
})

const operateUser = (record: any) => {
  let { orderStatus, orderType } = record
  let showOkBtn = false
  if (orderStatus == '1') {
    showOkBtn = true
  }
  setDrawerProps({
    okText: '确认付款',
    showOkBtn,
    cancelText: '关闭'
  })
  OrderViewOpenDrawer(true, {
    record
  })
}

const operateSuccess = () => {
  setPagination({
    current: 1
  })
  reload()
}
</script>

<style lang="less" scoped>
:deep(.ant-table-wrapper) {
  overflow-x: hidden;
}
</style>
